<template>
  <div>
    <el-popover placement="bottom" trigger="hover">
      <el-button slot="reference" circle>
        <div>
          <el-avatar :src="user_photo_url+loginUser.userAvatar"></el-avatar>
        </div>
      </el-button>
      <div align="center">
        <div class="username">
          <p>{{loginUser.userName}}</p>
        </div>
        <div>
          <ul style="display: flex">
            <li>
              <table>
                <a >
                  <tr>
                    <td>{{loginUser.totalUps}}</td>
                  </tr>
                  <tr>
                    <td>关注</td>
                  </tr>
                </a>
              </table>
            </li>
            <li>
              <el-divider direction="vertical"></el-divider>
            </li>

            <li>
              <table>
                <a>
                  <tr>
                    <td>{{loginUser.totalFans}}</td>
                  </tr>
                  <tr>
                    <td>粉丝</td>
                  </tr>
                </a>
              </table>
            </li>
            <li>
              <el-divider direction="vertical"></el-divider>
            </li>
            <li>
              <table>
                <tr>
                  <td>{{loginUser.totalUploads}}</td>
                </tr>
                <tr>
                  <td>视频</td>
                </tr>
              </table>
            </li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <a class="hover-items" @click="toPerson" >
                <i class="el-icon-user-solid"></i>
                <span>个人空间</span>
              </a>
            </li>
            <li style="background-color:; ">
              <a class="hover-items" href="/uploadmanage">
                <i class="el-icon-document-copy"></i>
                <span>稿件管理</span>
              </a>
            </li>

            <li @click="logout()">
              <a class="hover-items">
                <i class="el-icon-switch-button"></i>
                <span>退出登录</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "hoveruser",
  data() {
    return {
      user_photo_url:
        "http://",
      loginUser: "",
      zhuyeUrl:"/person/zhuye/",
    };
  },
  created() {
    this.getLoginUser();
  },
  methods: {
    logout() {
      this.axios({
        method: "get",
        params: {},
        url: "http://localhost:8090/user/logout"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          // res.data;
          window.localStorage.setItem("token", JSON.parse(JSON.stringify("")));
          this.$message.success("已退出登录！");
        })
        .catch(error => {
           
          this.$message.error(error.response.data.message);
        });
    },
    getLoginUser() {
      this.axios({
        method: "get",
        params: {},
        url: "http://localhost:8090/user/getLoginUser"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.loginUser = res.data;
        })
        .catch(error => {
           //每一个页面都刷新时都会请求一次app.vue的created里面的方法
         // this.$message.error(error.response.data.message);
        });
    },
    toPerson() {
      this.$router.push({
        path: "/person/zhuye/" + this.loginUser.userId,
     
      });
      location.reload();
    }
  }
};
</script>
<style   scoped>
.username {
  font-size: 30px;
  color: rgb(0, 132, 255);
}
.hover-items {
  font-size: large;
}
li {
  padding: 14px;
}
li :hover {
  color: blue;
}
/* 设置分割线条属性 */
.el-divider--vertical {
  display: inline-block;
  height: 90%;
  margin: 0 8px;
  background: 0 0;
  border-left: 2px dashed #e8eaec;
  position: relative;
}
</style>